<!-- 体征里2级路由呼吸页面 -->
<template>
  <div id="SignBreatheSubSurface">
    <div v-if="time.length">
      <ul class="cbp_tmtimeline" v-if="isTimeAxis">
        <li v-for="item1 in time">
          <div class="circle"></div><span class="time">{{item1|filterDateAxis}}</span>
          <div class="cbp_tmlabel">
            <ul class="list-record clearfix">
              <li class="list-title pull-left">
                <p>时间</p>
                <p>呼吸</p>
              </li>
              <li class='pull-left' v-for="item in listData[item1]">
                <p>{{item.PER_Time|filterTime}}</p>
                <p>{{item.Values}}</p>
              </li>
            </ul>
          </div>
          <div class="circle-bottom"></div>
        </li>
      </ul>
      <ul class="list-record clearfix listIO" v-for="item1 in time" v-if="!isTimeAxis">
        <li class="list-title pull-left">
          <p>时间</p>
          <p>呼吸</p>
        </li>
        <li class='pull-left' v-for="item in listData[item1]">
          <p>{{item.PER_Time|filterTime}}</p>
          <p>{{item.Values}}</p>
        </li>
      </ul>
    </div>
    <loading v-if="time.length ==0&&isShow"></loading>
    <noSearch v-if="time.length==0&&!isShow"></noSearch>
  </div>
</template>
<script>
  import { apiSignsIO } from '@/api/api'  //引入呼吸列表数据
  import loading from '@/components/loading/loading'
  import noSearch from '@/components/search/noSearch' //导入没有搜索结果组件
  import Bus from "@/components/common/bus"; //引入公共媒介JS BUS
  export default {
    data() {
      return {
        time: [],
        listData: [],
        patientID: this.$store.getters.ID,
        dataTime: "0000-00-00",
        isShow: true,
        isTimeAxis: true,
      }
    },
    watch: {
      dataTime: {
        handler(curVal, oldVal) {
          if (this.dataTime == '') {
            this.time = [];
            this.dataTime = "0000-00-00";
            this.isShow = true;
            this.isTimeAxis = true;
            this.GetIOSignsList();
          } else if (this.dataTime == "0000-00-00") {
            this.time = [];
            this.isShow = true;
            this.isTimeAxis = true;
            this.GetIOSignsList();
          } else {
            this.time = [];
            this.isShow = true;
            this.isTimeAxis = false;
            this.GetIOSignsList();
          }
        }
      }
    },
    mounted() {
      this.GetIOSignsList();
      Bus.$on("timePicker", e => {
        this.dataTime = e.trim();
      });
    },
    methods: {
      GetIOSignsList() {
        apiSignsIO({
          patientID: this.patientID,
          dateTime: this.dataTime,
          type: "呼吸"
        })
          .then(res => {
            if (JSON.parse(res).Status == -1) {
              this.isShow = false;
            }
           else if (JSON.parse(res).Status == 1) {
              this.isShow = true;
              this.listData = JSON.parse(res).Data;
              var obj = {};
              for (var ind in this.listData) {
                this.time.push(ind);
                this.listData[ind] = this.listData[ind].reduce(function (item, next) {
                  obj[next.PER_Time] ? '' : obj[next.PER_Time] = true && item.push(next);
                  return item;
                }, []);
                }
            }
          })
      },

    },
    components: {
      loading,
      noSearch
    }
  }
</script>
<style scoped>
  #SignBreatheSubSurface {
    padding-left: 50px;
    height: calc(100vh - 190px);
    overflow-y: auto;
    padding-bottom: 20px;
  }

    #SignBreatheSubSurface .cbp_tmtimeline {
      margin: 0;
      padding: 0;
      list-style: none;
      position: relative;
    }

      #SignBreatheSubSurface .cbp_tmtimeline:before {
        content: '';
        position: absolute;
        top: 2px;
        bottom: 0;
        width: 1px;
        background: #ccc;
      }

      #SignBreatheSubSurface .cbp_tmtimeline > li {
        position: relative;
        padding-left: 20px;
      }

  .listIO {
    margin: 45px;
  }

  #SignBreatheSubSurface .cbp_tmtimeline .circle {
    width: 8px;
    height: 8px;
    line-height: 8px;
    position: absolute;
    color: #fff;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 0 0 4px #84c3e3;
    text-align: center;
    left: -3px;
    top: 6px;
  }

  #SignBreatheSubSurface .cbp_tmtimeline .circle-bottom {
    width: 8px;
    height: 8px;
    line-height: 8px;
    position: absolute;
    color: #fff;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 0 0 4px #84c3e3;
    text-align: center;
    left: -3px;
    bottom: -14px;
  }

  #SignBreatheSubSurface .cbp_tmlabel {
    padding: 30px;
  }

  #SignBreatheSubSurface .list-record {
    display: inline-block;
    box-shadow: 0 0 10px #ccc;
    border-radius: 10px;
  }

    #SignBreatheSubSurface .list-record li {
      width: 80px;
      text-align: center;
    }

  #SignBreatheSubSurface li p:first-child {
    line-height: 52px;
    background-color: #f6f6f6;
  }

  #SignBreatheSubSurface .list-record li p:last-child {
    line-height: 46px;
  }

  #SignBreatheSubSurface .list-record li.list-title {
    background-color: #5db8e5;
    color: #fff;
    border-radius: 10px 10px 0 10px;
  }

    #SignBreatheSubSurface .list-record li.list-title p:first-child {
      background-color: #5db8e5;
      border-radius: 10px 0 0 0;
    }

    @media screen and (max-width: 576px){
      #SignBreatheSubSurface {
        padding-left: 10px;
      }
      #SignBreatheSubSurface  .cbp_tmlabel{
        padding: 10px;
      }
      #SignBreatheSubSurface  .list-record li{
        width: 100%;
        display: flex;
      }
      #SignBreatheSubSurface  .list-record li p{
        flex: 1;
      }
    }
</style>
